<template>
  <div v-show="$route.name == 'product-sell'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/product-list' }">肉码列表
    </el-breadcrumb-item>
      <el-breadcrumb-item>成品售出</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域--订单数据修改 -->
    <el-card>
      <div style="margin-bottom: 20px;">成品售出</div>
      <el-form :model="updateProduct" :rules="rules" ref="updateProduct" label-width="100px" class="demo-orderForm">
        <el-row>
          <el-col :span="10">
            <el-form-item label="名称">
              <el-input v-model="product.name" disabled style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="product.category_id" disabled popper-class="dropdownbox" filterable style="width:200px">
                <el-option v-for="item in categoryList" :label="item.category_name"
                  :value="item.id" :key="item.id">
                  <span style="float: left">{{ item.category_name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单位">
              <el-input v-model="product.unit" style="width:200px" disabled></el-input>
            </el-form-item>
            <el-form-item label="库存">
              <el-input-number controls-position="right" :precision="0" :step="1" v-model="product.count" style="width:200px" disabled></el-input-number>
            </el-form-item>
            <el-form-item label="备注" prop="comment">
              <el-input v-model="updateProduct.comment" style="width:300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item style="width:80%" label="日期" prop="sale_time">
              <el-date-picker type="date" placeholder="选择日期" v-model="updateProduct.sale_time">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="售向门店" prop="base">
              <el-select v-model="updateProduct.base" popper-class="dropdownbox" filterable style="width:200px" placeholder="请选择门店">
                <el-option v-for="item in storeList" :label="item.basename"
                  :value="item.base" :key="item.base">
                  <span style="float: left">{{ item.basename }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数量" prop="count">
              <el-input-number controls-position="right" :precision="2" :step="1" :min="0.01" :max="product.count ?  parseFloat(product.count) : 1" v-model="updateProduct.count" style="width:200px"></el-input-number>
            </el-form-item>
            <el-form-item label="售价" prop="sell_price"  v-show="groupid === 0">
              <el-input-number controls-position="right" :precision="2" :step="1" v-model="product.sell_price" style="width:200px" placeholder="请输入价格" ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" @click="handleSubmit">提交</el-button>
            <el-button  @click="back" style="margin-left: 5px">返回</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: '',
      groupid: '',
      product: {},
      updateProduct: {
        count: 1,
        comment: '',
        sale_time: '',
        base: '',
        sell_price: 0.00
      },
      rules: {
        sale_time: [{ required: true, message: '请选择日期', trigger: 'change' }],
        count: [{ type:'number', required: true, message: '请输入数量', trigger: 'blur' }],
        sell_price: [{ type:'number', required: true, message: '请输入售价', trigger: 'blur' }],
        base: [{ type:'number', required: true, message: '请输入售向门店', trigger: 'blur' }]
      },
      categoryList: [],
      storeList: []
    }
  },
  mounted() {
    this.getUserInfo()
    const myDate = new Date()
    const year = myDate.getFullYear() // 获取当前年份
    const month = myDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月所以要加1);
    const day = myDate.getDate() // 获取当前日（1-31）
    // 日期格式：2019/07/29 - 2019/07/29
    this.updateProduct.sale_time =  `${year}-${month}-${day}`
    this.getProductData()
    this.getCategoryList()
    this.getStoreList()
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      const { data: result } = await this.$http.get('/user/' + localStorage.userid)
      if (result.status !== 200) return this.$message.error(result.msg)
      this.groupid = result.data.groupid * 1
    },
    // 获取成品信息
    async getProductData() {
      if (this.$route.params.id) {
        this.id = this.$route.params.id
        localStorage.setItem('productId', this.$route.params.id)
      } else {
        this.id = localStorage.getItem('productId')
      }
      if (this.id) {
        const { data: result } = await this.$http.get('/house/' + this.id)
        if (result.status !== 200) {
          return this.$message.error(result.msg)
        }
        this.product = result.data
      }
    },
    // 获取分类
    async getCategoryList() {
      const { data: result } = await this.$http.get('/category')
      if (result.status !== 200) return this.$message.error(result.msg)
      this.categoryList = result.data
    },
    // 获取门店
    async getStoreList() {
      const { data: result } = await this.$http.get('/store/all')
      if (result.status !== 200) return this.$message.error(result.msg)
      this.storeList = result.data
    },
    back () {
      localStorage.removeItem('productId')
      this.$router.push({'name': 'product-list'})
    },
    handleSubmit() {
      this.$refs.updateProduct.validate(async (valid) => {
        if (!valid) return
        let data = {
          sale_time: new Date(this.updateProduct.sale_time).toLocaleDateString().split('/').join('-'),
          count: this.updateProduct.count,
          comment: this.updateProduct.comment,
          base: this.updateProduct.base,
          sell_price: this.product.sell_price
        }
        // 可以发起新增入库单的网络请求
        const { data: result } = await this.$http.put('/house/sell/' + this.id, data)
        if (result.status !== 200) {
          return this.$message.error(result.msg)
        }
        this.$message.success('保存成功！')
        this.$router.push({ path: '/product-list' })
      })
    }
  }

}
</script>